<template>
  <div>
    <el-dialog :visible.sync="showChildDialog" v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose"
               title="导入设备"
    >
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"
               label-position="left"
      >
        <el-form-item label="设备类型" prop="deviceType">
          <el-select v-model="formData.deviceType" placeholder="请选择设备类型" clearable :style="{width: '30%'}">
            <el-option
              v-for="dict in dict.type.device_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="126px" label="上传设备二维码" >
<!--          <el-upload ref="qrCode" :file-list="qrCodefileList" :action="qrCodeAction" multiple
                     :before-upload="qrCodeBeforeUpload" list-type="picture-card" accept="image/*"
          >
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">只能上传不超过 2MB 的image/*文件</div>
          </el-upload>-->
          <image-upload ref="imageUpload" :webkitdirectory.sync="webkitdirectory" @deleteFile="deleteFiles"></image-upload>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { deleteFile } from '@/api/file/file'
import {importDevice} from '@/api/device/device'
export default {
  name: 'importDevice',
  dicts: ['device_type'],
  inheritAttrs: false,
  components: {},
  props: {
    importOpen: {
      type: Boolean,
      default: false
    },
    webkitdirectory: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        deviceType: null,
        qrCode: null
      },
      rules: {
        deviceType: [{
          required: true,
          message: '请选择设备类型',
          trigger: 'change'
        }],

      },
    }
  },
  computed: {
    showChildDialog: {
      get: function() {
        return this.importOpen
      },
      set: function(newValue) {
        this.$emit('update:importOpen', newValue) // 触发更新事件，父组件的showDialog会自动更新
      }
    }
  },
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    onOpen() {
    },
    onClose() {
      this.$refs['elForm'].resetFields()
    },
    close() {
      this.showChildDialog=false
      if(this.$refs.imageUpload.fileList.length>0){
        deleteFile({urls:this.$refs.imageUpload.fileList.map(file=>file.url).join(',')})
        this.$refs.imageUpload.fileList=[]
      }
      this.$refs['elForm'].resetFields()
    },
    deleteFiles(fileList,callback){
      if(fileList.length>0){
        deleteFile({urls:fileList.map(file=>file.url).join(',')}).then(res=>callback(res))
      }
    },
    handleConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        const fileList = this.$refs.imageUpload.fileList
        if(fileList.length===0){
          this.$modal.msgError('上传二维码在提交')
          return
        }
        importDevice(fileList,this.formData.deviceType).then(res=>{
          if(res.data.code==='200'){
            this.$modal.msgSuccess('上传成功')
            this.showChildDialog=false
            this.$emit("importSuccess");
            this.$refs['elForm'].resetFields()
            this.$refs.imageUpload.fileList=[]
            return
          }
          const map = res.data.errList.join(',')
          this.$modal.msgError('这些二维码存在问题：'+map)
        })

      })
    },
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

</style>
